@base_padding: 10px;
.g3w-viewport {
  position: relative;
  #offline {
    position:absolute;
    top: 55px;
    background-color: rgba(255,255,255,0.8);
    padding: 5px;
    border-radius: 3px;
    color: #dd4b39;
    left: 0;
    z-index: 100;
    font-size: 25px;
  }
  background: #ffffff;
  overflow:hidden;
  line-height: 0;
  .g3w-view {
    &.map {
      line-height: normal;
      display:inline-block;
      height:0;
      width:0;
      position: relative;
      //-webkit-transition: all 0.1s;
      //transition: all 0.1s;
    }
    &.content {
      .preview {
        width: 100%;
        margin-top: 10px;
        display:flex;
        align-items: center;
        .filename {
          overflow: hidden;
          margin: 15px;
          font-weight: bold;
        }
        .clearmedia {
          .g3w-icon {
            color: red;
          }
          cursor: pointer;
          margin-left: auto;
        }
        .previewtype {
          &:hover{
            background-color: #efefef;
          }
          display: flex;
          justify-content: center;
          padding-top: 10px;
          cursor: pointer;
          background-color: #ffffff;
          border-radius: 5px;
          width: 50px;
          height: 50px;
          border: 2px solid;
          &.pdf {
            color: @red;
            border-color:@red;
          }
          &.image {
            color: @yellow;
            border-color:@yellow;
          }
          &.video {
            color: orange;
            border-color:orange;
          }
          &.unknow {
            color: grey;
            border-color:grey;
          }
          &.zip {
            color: saddlebrown;
            border: 2px solid saddlebrown;
          }
          &.text {
            color: @light-blue;
            border-color:@light-blue;
          }
          &.excel {
            color: @green;
            border-color: @green;
          }
          &.ppt {
            color: @purple;
            border-color: @purple;
          }
        }
      }

      .g3wform-relation-table tbody td {
        .preview {
          .previewtype {
            width: 30px;
            height: 30px;
            padding-top: 6px;
            i, i.fa-2x {
              font-size: 1em;
            }
          }
        }
      }

      .error-message {
        font-weight: bold;
        font-size: 1.2em;
        color: #ff0000;
        padding: 5px;
        margin: 3px;
      }
      .table-header-tool {
        padding: 10px;
        color: #ffffff;
        font-size: 1.3em;
      }
      .action-button {
        display:inline-block;
        text-align: center;
        text-shadow: 0 3px 5px rgba(0,0,0,0.3);
        padding: 5px;
        cursor: pointer;
        border-radius: 5px;
        &:hover {
          background-color: #ffffff;
        }
      }
      .action-button-icon {
        &.trash {
          color:red !important;
        }
        padding-top: 2px;
        font-weight: bold;
        text-decoration: none;
      }

      line-height: normal;
      float:right;
      overflow-wrap: break-word;
      height:0;
      width:0;
      background-color: @gray-lighter;
      overflow:hidden;
      position: relative;
      .contents {
        height: 100%;
        padding-left: 0;
      }
      &.split-h {
        border-left: 1px solid darken(@gray-lighter, 10%);
      }
      &.split-v {
        border-top: 1px solid darken(@gray-lighter, 10%);
      }
      .g3w_contents_back {
        display: inline-block;
        margin-left: 5px;
        > span {
          cursor: pointer;
          font-weight: bold;
          &:hover {
            text-decoration: none;
          }
        }
      }
    }
    .close-panel-block {
      overflow: hidden;
      line-height: 20px;
      margin-top: 2px;
      margin-bottom: 5px;
      margin-left: 10px;
      font-size:1.5em;
      .panel-title {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 1em;
      }
      span {
        i.panel-button {
          color: transparent;
        }
        &.g3w-span-button {
          height: 1.1em;
          line-height: 1.1em;
          width: 1.1em;
          font-size: 1em !important;
          margin-top: 8px;
          margin-bottom: 5px;
          cursor: pointer;
          box-shadow:  0 2px 4px rgba(0,0,0,0.2);
          -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
          -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
          -o-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
          border-radius: 30%;
        }

      }
    }

    #contenttitle {
      font-weight: bold;
    }
  }

}
